<template>
  <div class="w-full h-full overflow-auto pt-2 flex flex-col bg-white">
        <router-view v-if="apiStore.projectName"></router-view>
    </div>
</template>

<script>
import { useApiStore } from "@/store/api";
import router from '../../router';
import { ref } from '@vue/composition-api';
export default {
  destroyed() {
    this.apiStore.$reset()
  },
  setup() {
    const apiStore = useApiStore()
    apiStore.init(router.currentRoute.query.projectId)
    const tabActive = ref(0)
    router.currentRoute.matched.forEach(item => {
      if (item.name === 'api') {
        tabActive.value = 0
      } else if (item.name === 'setup') {
        tabActive.value = 1
      }
    })
    
    
    function onTabChange(val) {
      console.log('tab')
      if (val === 0) {
        router.replace({
          name: 'api',
          query: {
            projectId: apiStore.projectId,
          }
        })
      } else if (val === 1) {
        router.replace({
          name: 'setup-common',
          query: {
            projectId: apiStore.projectId,
          }
        })
      }
    }

    return {
      tabActive,
      onTabChange,
      apiStore
    }

  }
};
</script>

<style scoped>
</style>